<template>
  <el-main>
    <el-card shadow="never">
      <el-tabs tab-position="top">
        <el-tab-pane label="AI配置">
          <el-alert title="AI配置为系统业务中的AI使用的配置，应该由系统管理员操作" type="warning" style="margin-bottom: 15px"></el-alert>
          <el-collapse style="width: 100%">
            <!-- 通用设置 token 地址 对话地址 向量地址 生图地址-->
            <el-collapse-item class="collapse-item" title="通用设置" name="ai-common">
              <el-form :model="aiSetting" label-width="120px" label-position="left">
                <el-form-item class="margin-form-item" label="Token" prop="token">
                  <el-input v-model="aiSetting.common.token" placeholder="token" clearable></el-input>
                </el-form-item>

                <el-form-item class="margin-form-item" label="对话节点" prop="chatEndpoint">
                  <el-input v-model="aiSetting.common.chatEndpoint" placeholder="chatEndpoint" clearable></el-input>
                </el-form-item>

                <el-form-item class="margin-form-item" label="向量节点" prop="embeddingEndpoint">
                  <el-input v-model="aiSetting.common.embeddingEndpoint" placeholder="embeddingEndpoint" clearable></el-input>
                </el-form-item>

                <el-form-item class="margin-form-item" label="图片节点" prop="imagesEndpoint">
                  <el-input v-model="aiSetting.common.imagesEndpoint" placeholder="imagesEndpoint" clearable></el-input>
                </el-form-item>
              </el-form>
            </el-collapse-item>

            <!-- 倍率设置 -->
            <el-collapse-item class="collapse-item" title="倍率设置" name="1">
              <el-form :model="aiSetting" label-width="120px" label-position="left">
                <el-form-item class="margin-form-item" label="模型倍率Prompt" prop="prompt">
                  <el-input v-model="aiSetting.prompt" placeholder="模型倍率Prompt" clearable type="textarea" :rows="8"></el-input>
                </el-form-item>

                <el-form-item class="margin-form-item" label="模型倍率Completion" prop="completion">
                  <el-input v-model="aiSetting.completion" placeholder="模型倍率Completion" clearable type="textarea" :rows="8"></el-input>
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item class="collapse-item" title="日志设置" name="2">
              <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
              <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
            </el-collapse-item>
            <el-collapse-item class="collapse-item" title="渠道监控" name="3">
              <div>Simplify the process: keep operating process simple and intuitive;</div>
              <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
              <div>
                Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
      <div class="save-div">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-card>
  </el-main>
</template>

<script>
export default {
  name: 'system',
  data() {
    return {
      aiSetting: {
        prompt: '',
        completion: '',
        common: {
          token: '',
          chatEndpoint: '',
          embeddingEndpoint: '',
          imagesEndpoint: '',
        },
      },
    };
  },
  mounted() {
    this.detail();
  },
  methods: {
    /**
     * 获取详情
     */
    async detail() {
      var detail = await this.$API.aiSetting.detail.get();
      if (detail.data != null) {
        this.aiSetting = detail.data;
      }
    },
    /**
     * 保存
     */
    async save() {
      var res = await this.$API.aiSetting.set.post(this.aiSetting);
      if (res.code == 200) {
        this.$message.success('操作成功');
      } else {
        this.$alert(res.message, '提示', { type: 'error' });
      }
    },
  },
};
</script>

<style>
</style>
